<script setup>
const BASE_BED_IMG_URL = ref(import.meta.env.VITE_APP_BED_IMG_API);
const props = defineProps({
  video: {
    type: String,
    default: null,
  },
  title: {
    type: String,
    default: null,
  },
});
</script>

<template>
  <div class="page-title">
    <video autoplay="autoplay" muted="muted" loop="loop"
           :src="BASE_BED_IMG_URL + props.video" class="video"></video>
    <div style="position: absolute; left: 0; top: 0; padding: 20px;">
      <div style="color: white; margin: 10px;">
        <div>记录</div>
        <div style="font-size: 36px; font-weight: bold; line-height: 2;">
          {{ props.title }}
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<style scoped lang="less">
.page-title {
  position: relative;
  width: 1200px;
  max-width: 1200px;
  height: 410px;
  overflow: hidden;
  border-radius: 20px;

  .video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>